
<template>
  <div class="nav-box">
    <van-swipe class="my-swipe" :duration="300" :loop="false" indicator-color="red">
      <van-swipe-item>
        <van-grid :border="false" :column-num="5">
          <van-grid-item>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-meirituijian"></use>
            </svg>
            <p>每日推荐</p>
          </van-grid-item>
          <van-grid-item>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-FM_weixuanze"></use>
            </svg>
            <p>私人FM</p>
          </van-grid-item>
          <van-grid-item>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-gedan"></use>
            </svg>
            <p>歌单</p>
          </van-grid-item>
          <van-grid-item>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-daochu1024-02"></use>
            </svg>
            <p>排行榜</p>
          </van-grid-item>
          <van-grid-item>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-gequ"></use>
            </svg>
            <p>一歌一遇</p>
          </van-grid-item>

        </van-grid>
      </van-swipe-item>
      <van-swipe-item>
        <van-grid :border="false" :column-num="5">
          <van-grid-item>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-zhuanji"></use>
            </svg>
            <p>数字专辑</p>
          </van-grid-item>
          <van-grid-item>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-tushu"></use>
            </svg>
            <p>有声书</p>
          </van-grid-item>
          <van-grid-item>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-31guanzhu"></use>
            </svg>
            <p>关注新歌</p>
          </van-grid-item>
          <van-grid-item>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-woyaozhibo"></use>
            </svg>
            <p>直播</p>
          </van-grid-item>
          <van-grid-item>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-youxishoubing"></use>
            </svg>
            <p>游戏专区</p>
          </van-grid-item>
        </van-grid>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="scss">
.nav-box {
  width: 6.94rem;
  height: 1.5rem;
  margin: 0 auto;
  color: var(--text);


  p {
    font-size: .24rem;
  }
}

.icon {
  font-size: .44rem;
  color: #fc494f !important;
}

</style>